import { inject, observer } from 'mobx-react';
import { Button, Modal, Spin } from 'antd';
import { toJS } from 'mobx';
import { WeaRightMenu, WeaTop, WeaTab, WeaErrorPage, WeaTools, WeaAlertPage } from 'ecCom';
import { WeaSearchGroup, WeaFormItem } from 'ecCom';
import { WeaSwitch } from 'comsMobx';

@inject('crmProductStore')
@observer
class ProductView extends React.Component {
  componentDidMount() {
    const { location: { query }, crmProductStore } = this.props;
    crmProductStore.initProductData({ ...query, operation: 'view' });
    if (window.location.pathname.indexOf('/spa/crm/mobx/index') >= 0) {
      document.title = '产品信息';
    }
  }
  componentWillReceiveProps(nextProps) {
    const oldId = this.props.location.productId;
    const newId = nextProps.location.productId;
    if (oldId !== newId) {
      const { location: { query }, crmProductStore } = nextProps;
      crmProductStore.initProductData({ ...query, operation: 'view' });
    }
  }
  render() {
    const { loading, verified, hasRight } = this.props.crmProductStore;
    if (verified && !hasRight) {
      return (<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@n4veuz`} >
        <div style={{ color: '#000' }}>
                        对不起，您暂时没有权限！
        </div>
      </WeaAlertPage>
      );
    }
    if (verified && hasRight) {
      return (
        <WeaTop
          ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@4b2ru8`}
          title={'产品'}
          loading={loading}
          icon={<i className="icon-coms-crm" />}
          iconBgcolor="#96358a"
          buttons={[]}
          buttonSpace={10}
          showDropIcon={false}
        >
          {this.getFormItems()}
        </WeaTop>
      );
    }
    return <div><Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@hiikmu`} spinning={loading} /> </div>;
  }
  getFormItems() {
    const { condition, form } = this.props.crmProductStore;
    const { isFormInit } = form;
    const group = [];
    isFormInit && toJS(condition).map((c, i) => {
      const items = [];
      c.items.map((fields, index) => {
        let isunderline = '';
        if (fields.viewAttr == '1' || (fields.conditionType == 'BROWSER' && fields.browserConditionParam.viewAttr == '1')) { fields.hasBorder = false; isunderline = 'underline'; } // 只读样式控制
        let dom;
        if (fields.conditionType == 'IMAGE_VIEW') {
          dom = (<div style={{ width: '300px' }}>
            <img style={{ width: '100%' }} src={fields.value || ''} />
          </div>);
        } else {
          dom = <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@a1ghdf@${fields.domkey[0]}`} fieldConfig={fields} form={form} />;
        }
        items.push({
          com: (<WeaFormItem
            ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@uye5ax@${fields.domkey[0]}`}
            label={`${fields.label}`}
            labelCol={{ span: `${fields.labelcol}` }}
            wrapperCol={{ span: `${fields.fieldcol}` }}
            underline={isunderline}
          >
            {dom}
          </WeaFormItem>),
          colSpan: 1,
        });
      });
      group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@ocdz23@${i}`} needTigger title={c.title} showGroup={c.defaultshow} items={items} />);
    });
    return group;
  }
}

export default WeaTools.tryCatch(React,
  props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@x8kife`} msg={props.error ? props.error : '对不起，该页面异常，请联系管理员！'} />,
  { error: '' },
)(ProductView);
